
import ProForm, {ProFormDigit, ProFormRadio, ProFormText} from '@ant-design/pro-form';
import {Modal, Skeleton} from 'antd';
import React,{useEffect, useState} from 'react';
import {getPersonById} from "@/services/person/person";


const Create = (props) => {

  const [initialValues,setInitialValues] = useState(undefined)

  const {isModalVisible} = props;
  const {isShowModal} = props;
  const {func} = props;
  const {editId} = props;



  useEffect(async () => {
    if (editId !== undefined) {
      const res = await getPersonById(editId);
      setInitialValues(res.data);
    }
  }, []);

  return (
    <Modal
      title="新建"
      visible={isModalVisible}
      footer={null}
      onCancel={() => isShowModal(false)}
      destroyOnClose={true}
    >
      {
        initialValues === undefined ?
          <Skeleton avatar paragraph={{ rows: 4 }} /> :
          <ProForm
            initialValues={initialValues}
            onFinish={values => func(editId,values)}
          >
            <ProFormText width="md" name="name" label="Name"/>
            <ProFormText.Password width="md" name="password" label="Password"/>
            <ProFormDigit width="md" name="age" label="Age"/>
            <ProFormRadio.Group
              name="gender"
              label="Gender"
              radioType="button"
              options={[
                {
                  label: '男',
                  value: '男',
                },
                {
                  label: '女',
                  value: '女',
                }
              ]}
            />
          </ProForm>
      }


    </Modal>
  );
};

export default Create;
